{% extends 'base.html' %}
{% load static %}
{% load text_filters %}
{% load math_filters %}

{% block title %}{{ page_title }}|{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{% static 'moves/css/list.css' %}">
    <link rel="stylesheet" href="{% static 'css/pagination.css' %}">

{% endblock %}



{% block content %}
    <div class="move-section">
        <!-- 头部区域 -->
        <div class="header-area">
            <div>
                <h1 class="page-title">电影 <span class="movie-count">({{ count }})</span></h1>
            </div>
            <div class="control-buttons">
                <div class="control-btn" id="filterBtn">
                    <i class="fas fa-filter"></i>
                </div>
                <div class="control-btn" id="sortBtn">
                    <i class="fas fa-sort"></i>
                </div>
                <div class="control-btn active" id="viewCardBtn">
                    <i class="fas fa-th"></i>
                </div>
                <div class="control-btn" id="viewListBtn">
                    <i class="fas fa-list"></i>
                </div>
            </div>
        </div>

        <!-- 筛选面板 -->
        <div class="filter-panel" id="filterPanel">
            <div class="row">
                <div class="col-md-2">
                    <div class="filter-section">
                        <div class="filter-title">状态</div>
                        <div class="filter-options">
                            <div class="filter-option active">全部</div>
                            <div class="filter-option">NFO识别</div>
                            <div class="filter-option">TMDB识别</div>
                            <div class="filter-option">智能识别</div>
                            <div class="filter-option">未识别</div>
                        </div>
                    </div>
                </div>

                <div class="col-md-2">
                    <div class="filter-section">
                        <div class="filter-title">进度</div>
                        <div class="filter-options">
                            <div class="filter-option active">全部</div>
                            <div class="filter-option">未观看</div>
                            <div class="filter-option">已观看</div>
                        </div>
                    </div>
                </div>

                <div class="col-md-2">
                    <div class="filter-section">
                        <div class="filter-title">风格</div>
                        <div class="filter-options">
                            <div class="filter-option active">全部</div>
                            <div class="filter-option">剧情</div>
                            <div class="filter-option">喜剧</div>
                            <div class="filter-option">动作</div>
                            <div class="filter-option">爱情</div>
                            <div class="filter-option">惊悚</div>
                            <div class="filter-option">犯罪</div>
                            <div class="filter-option">悬疑</div>
                            <div class="filter-option">战争</div>
                            <div class="filter-option">科幻</div>
                            <div class="filter-option">动画</div>
                            <div class="filter-option">恐怖</div>
                            <div class="filter-option">家庭</div>
                            <div class="filter-option">冒险</div>
                            <div class="filter-option">奇幻</div>
                            <div class="filter-option">历史</div>
                            <div class="filter-option">纪录</div>
                            <div class="filter-option">音乐</div>
                            <div class="filter-option">西部</div>
                            <div class="filter-option">其他</div>
                        </div>
                    </div>
                </div>

                <div class="col-md-2">
                    <div class="filter-section">
                        <div class="filter-title">地区</div>
                        <div class="filter-options">
                            <div class="filter-option active">全部</div>
                            <div class="filter-option">中国大陆</div>
                            <div class="filter-option">中国香港</div>
                            <div class="filter-option">中国台湾</div>
                            <div class="filter-option">美国</div>
                            <div class="filter-option">英国</div>
                            <div class="filter-option">法国</div>
                            <div class="filter-option">德国</div>
                            <div class="filter-option">意大利</div>
                            <div class="filter-option">西班牙</div>
                            <div class="filter-option">葡萄牙</div>
                            <div class="filter-option">韩国</div>
                            <div class="filter-option">日本</div>
                            <div class="filter-option">印度</div>
                            <div class="filter-option">泰国</div>
                            <div class="filter-option">其他</div>
                        </div>
                    </div>
                </div>

                <div class="col-md-2">
                    <div class="filter-section">
                        <div class="filter-title">年份</div>
                        <div class="filter-options">
                            <div class="filter-option active">全部</div>
                            <div class="filter-option">2025</div>
                            <div class="filter-option">2024</div>
                            <div class="filter-option">2023</div>
                            <div class="filter-option">2022</div>
                            <div class="filter-option">2021</div>
                            <div class="filter-option">2020-2011</div>
                            <div class="filter-option">2010-2001</div>
                            <div class="filter-option">2000-1991</div>
                            <div class="filter-option">1990-1981</div>
                            <div class="filter-option">更早</div>
                        </div>
                    </div>
                </div>

                <div class="col-md-2">
                    <div class="filter-section">
                        <div class="filter-title">类型</div>
                        <div class="filter-options">
                            <div class="filter-option active">全部</div>
                            <div class="filter-option">电影</div>
                            <div class="filter-option">剧集</div>
                            <div class="filter-option">合集</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 排序菜单 -->
        <div class="sort-menu" id="sortMenu">
            <div class="sort-option active">
                <i class="fas fa-check"></i> 名称
            </div>
            <div class="sort-option">
                <i class="far fa-circle"></i> 类型
            </div>
            <div class="sort-option">
                <i class="far fa-circle"></i> 添加时间
            </div>
            <div class="sort-option">
                <i class="far fa-circle"></i> 上映日期
            </div>
            <div class="sort-option">
                <i class="far fa-circle"></i> 评分
            </div>

            <div class="order-options">
                <div class="order-option active">降序</div>
                <div class="order-option">升序</div>
            </div>
        </div>

        <!-- 电影卡片模式 -->
        <div class="movies-grid" id="cardView">
            <!-- 电影卡片 -->
            {% for film in films %}
                <div class="movie-card">
                    <a href="{% url 'movesDetails' film.id %}">
                        <div class="movie-poster">
                            <img src="{{ film.poster }}" alt="{{ film.num }}">
                            <div class="resolution-badge">{{ film.runtime }}分钟</div>
                        </div>
                    </a>
                    <div class="movie-info">
                        <div class="movie-title">{{ film.title }}</div>
                        <div class="movie-meta">
                            <span class="movie-year">{{ film.year }}</span>
                            <span class="movie-rating">{{ film.rating }}</span>
                        </div>
                    </div>
                </div>

            {% endfor %}

        </div>

        <!-- 电影列表模式 -->
        <div class="movies-list" id="listView">
            <!-- 列表项 -->
            {% for film in films %}

                <div class="list-item">
                    <a href="{% url 'movesDetails' film.id %}">
                        <div class="list-poster">
                            <img src="{{ film.poster }}"
                                 alt="{{ film.num }}">
                        </div>
                    </a>
                    <div class="list-content">
                        <div class="list-title">{{ film.title }}</div>
                        <div class="list-meta">
                            <span>{{ film.year }}</span>
                            <span class="list-rating">{{ film.rating }}</span>
                            <span>法国</span>
                            <span>冒险</span>
                        </div>
                        <div class="list-description">
                            {{ film.plot }}
                        </div>
                        <div class="list-actions">
                            <div class="action-btn">播放</div>
                            <div class="action-btn">收藏</div>
                        </div>
                    </div>
                </div>

            {% endfor %}
        </div>
    </div>

    {% include "components/pagination.html" with paginator=films.paginator page_obj=films max_visible=6 theme="dark" %}


{% endblock %}


{% block js %}
    <script src="{% static 'moves/js/list.js' %}"></script>
{% endblock %}


